<template>
  <div class="login_container" id="login">
    <div class="login_form">
      <h2>用户管理</h2>
      <el-form ref="loginForm" :model="loginForm" :rules="validateRules">
        <el-form-item prop="username">
          <el-input
              prefix-icon="iconfont icon-tubiao211"
              v-model="loginForm.username"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
              prefix-icon="iconfont icon-mima"
              v-model="loginForm.password"
              type="password"
          >
          </el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="loginIn">登录</el-button>
          <el-button type="info" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {login} from '@/utils/api'

export default {
  name: "login",
  data() {
    return {
      //绑定表单数据
      loginForm: {
        username: "admin",
        password: "123456",
      },
      //验证表单规则
      validateRules: {
        username: [
          {required: true, message: "请输入用户名", trigger: "blur"},
          {min: 5, max: 15, message: "长度在 5 到 15 个字符", trigger: "blur"},
        ],
        password: [
          {required: true, message: "请输入密码", trigger: "change"},
          {min: 6, max: 25, message: "密码长度在 6到 25 个字符", trigger: "blur"},
        ],
      },
    };
  },
  methods: {
    //用户登录
    loginIn() {
      //对表单对整体合法性检验
      this.$refs.loginForm.validate(async valid => {
        console.log(valid)
        if (!valid) return;
        const res = await login(this.loginForm)
        console.log('await结果：', res)
        sessionStorage.setItem('token', res.token)
        this.$router.push({path: '/Home'})
      })
    },
    //重置表单
    resetForm() {
      this.$refs.loginForm.resetFields()
    }
  }
};
</script>
<style lang="scss" scoped>
#login {
  width: 100%;
  height: 100%;
  background: url("../../assets/images/《进击的巨人》光 女孩 4K高清动漫壁纸_1920x1080_4kbizhi.com.jpg") no-repeat 100%;
  background-size: 100% 100%;

  .login_form {
    box-sizing: border-box;
    padding: 0 30px;
    width: 40%;
    height: 300px;
    background: rgba(255, 255, 255, 0.2);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    border-radius: 20px;
  }

  .login_form h2 {
    text-align: center;
    line-height: 80px;
  }

  .btns {
    display: flex;
    justify-content: flex-end;
  }
}
</style>